<div class="layui-card">
	<div class="layui-card-header">
		<h2 class="header-title">群组列表</h2>
		<span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>群组列表</cite></a>
        </span>
	</div>
	<div class="layui-card-body">
		<!--<div class="layui-form toolbar">
			账号/昵称：
			<input id="queryUser" class="layui-input search-input" type="text" placeholder="请输入账号或昵称" />&emsp;
			<button id="logr-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
		</div>-->
		<div>
			<button class="layui-btn" id="createG" style="float: right;">创建群组</button>
			<div class="layui-clear"></div>
		</div>
		<table class="layui-table" id="groupl-table" lay-filter="gList"></table>
	</div>
</div>

<script type="text/html" id="groupBar">
	<a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="open" title="查看群组"><i class="layui-icon layui-icon-layer"></i></a>
	<a class="layui-btn layui-btn-sm" lay-event="del" title="编辑群组"><i class="layui-icon layui-icon-edit"></i></a>
	<a class="layui-btn layui-btn-danger layui-btn-sm" title="移除群组" lay-event="edit"><i class="layui-icon layui-icon-delete"></i></a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="group-model">
	<form id="group-form" lay-filter="group-form" class="layui-form model-form">
		<input name="groupId" type="hidden" />
		<div class="layui-form-item">
			<label class="layui-form-label">群组名称</label>
			<div class="layui-input-block">
				<input name="name" placeholder="请输入群组名" type="text" class="layui-input" maxlength="20" lay-verify="required" required/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">标签</label>
			<div class="layui-input-block">
				<select name="label" xm-select="label" lay-verify="required"></select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<textarea name="remark" placeholder="请输入内容" class="layui-textarea" maxlength="200"></textarea>
			</div>
		</div>
		<div class="layui-form-item model-form-footer">
			<button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
			<button class="layui-btn" lay-filter="group-form-submit" lay-submit>保存</button>
		</div>
	</form>
</script>

<script>
	layui.use(['form', 'laydate', 'table', 'util', 'config', 'admin', 'index', 'formSelects'], function() {
		var laydate = layui.laydate;
		var form = layui.form;
		var index = layui.index;
		var table = layui.table;
		var config = layui.config;
		var util = layui.util;
		var com = layui.common;
		var admin = layui.admin;
		var formSelects = layui.formSelects;

		var alog = {}
		alog = config.getTempData('loginInfo')

		var crid = '{"creatorId":"' + alog.userId + '","orgId":"' + alog.orgId + '"}';

		crid = JSON.parse(crid)

		config.putTempData('crid', crid)

		usergroupListV('')

		$('#createG').click(function() {
			showEditModel()
		})

		var showEditModel = function(data) {
			var title = '添加群组';
			admin.popupCenter({
				title: title,
				path: 'components/system/addGroup.html',
				finish: function() {
					usergroupListV("")
				}
			});
		};

		function showGroupTable(tabledata) {
			table.render({
				elem: '#groupl-table',
				id: 'groupl-table',
				data: tabledata,
				page: true,
				limit: 50,
				response: {
					countName: 'data.total' //数据总数的字段名称，默认：count
				},
				cols: [
					[{
							field: 'groupId',
							title: '群组ID'
						},
						{
							field: 'name',
							title: '群名称'
						},
						{
							field: 'addTime',
							title: '创建时间',
							templet: function(d) {
								return d.addTime.substring(0, 10, '')
							}
						},
						{
							field: 'total',
							title: '群人数'
						},
						{
							field: 'label',
							title: '群标签'
						},
//						{
//							field: 'nickname',
//							title: '群成员'
//						},
						{
							field: 'remark',
							title: '群备注'
						},
						{
							field: 'orgName',
							title: '渠道'
						},
						{
							field: 'caozuo',
							title: '操作',
							toolbar: "#groupBar"
						}
					]
				]
			});
		}

		function usergroupListV(quer) {

			var a;
			if(alog.orgId == 1) {
				a = "";
			} else {
				a = alog.orgId + "";
			}

			$.ajax({
				type: "POST",
				url: groupListPath,
				data: {
					params: JSON.stringify({
						sortOrder: "group_id asc",
						pageSize: 1000,
						pageNumber: 1,
						orgId: a,
						search: quer
					})
				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				beforeSend: function(request) {},
				success: function(data) {
					showGroupTable(data.rows);
				},
				error: function(result) {
					console.log(result);
					config.removeToken();
					location.replace('login.html');
				},
			});
		}
		//updateGroup()
		function updateGroup(d) {
			$.ajax({
				type: "POST",
				url: updateGroupPath,
				data: {
					params: JSON.stringify(d)
				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				beforeSend: function(request) {},
				success: function(data) {
					if(data.code == 0) {
						layer.closeAll();
						layer.msg(data.msg, {
							icon: 1
						});
						usergroupListV("")
					}else{
						layer.msg(data.msg, {
							icon: 2
						});
					}

				},
				error: function(result) {
					console.log(result);
				},
			});
		}

		form.on('submit(group-form-submit)', function(data) {
			updateGroup(data.field)
			return false;
		});

		table.on('tool(gList)', function(obj) {
			var data = obj.data;
			if(obj.event === 'edit') {
				layer.confirm('确定移出此群组吗？', function(i) {
					$.ajax({
						type: "POST",
						url: delGroups,
						data: {
							groupId: data.groupId
						},
						dataType: "json",
						xhrFields: {
							withCredentials: true
						},
						success: function(data) {
							layer.msg(data.msg, {
								icon: 1
							});
							usergroupListV("")
						},
						error: function(result) {
							console.log(result);
						}
					});
				});
			} else if(obj.event === 'open') {
				admin.putTempData('groupId', data); // 用缓存传递参数
				// 不分离版本用后台地址
				index.openNewTab({
					title: data.name,
					url: 'components/system/groupinfo.html',
					menuId: data.groupId + "u"
				});
			} else if(obj.event === 'del') {
				layer.open({
					type: 1,
					title: '修改群组',
					skin: 'zbyjs',
					area: '450px',
					offset: '120px',
					content: $('#group-model').html(),
					success: function() {
						$('#group-form')[0].reset();
						$('#group-form').attr('method', 'GET');

						admin.req('role_list.json', {}, function(datas) {
							layer.closeAll('loading');
							if(0 == datas.code) {
								// 渲染多选下拉框
								var roleSelectData = new Array();
								for(var i = 0; i < datas.data.length; i++) {
									roleSelectData.push({
										name: datas.data[i].roleName,
										value: datas.data[i].label
									});
								}
								formSelects.data('label', 'local', {
									arr: roleSelectData
								});
							} else {
								layer.msg('获取角色失败', {
									icon: 2
								});
							}
							form.val('group-form', data);
							$('#group-form').attr('method', 'GET');
							var sz = data.label.split(',');
							formSelects.value('label', sz);
						}, 'GET');
					}
				});
			}else if(obj.event ==='tuisong'){
				
			}
		});

	});
</script>